// 瀑布流布局实现算法
const masonryFun = () => {
  const container = document.querySelector('.image-container')
  const items = document.querySelectorAll('.item')

  const columnWidth = 300 // 每个item的宽度
  const gap = 10 // 间距
  const containerWidth = container.clientWidth
  const columnCount = Math.floor(containerWidth / (columnWidth + gap))

  // 记录每列当前的高度
  const columnHeights = new Array(columnCount).fill(0)

  items.forEach((item) => {
    // 找到当前最矮的那一列
    const minHeight = Math.min(...columnHeights)
    const columnIndex = columnHeights.indexOf(minHeight)

    // 设置位置
    item.style.left = `${columnIndex * (columnWidth + gap)}px`
    item.style.top = `${minHeight}px`

    // 更新该列的高度
    columnHeights[columnIndex] += item.offsetHeight + gap
  })

  // 设置容器高度（否则外层容器会坍塌）
  container.style.height = Math.max(...columnHeights) + 'px'
}

export default masonryFun
